<template>
  <div>父子同心</div>
  <h3>{{ count }}</h3>
  <button @click="count++">count++</button>
  <hr />
  <Childs @chang-list="changelist" :count="count" :obj="obj" />
  <hr />
  <Grandson :count="count" />
</template>

<script>
import { ref, provide } from 'vue'
import Childs from './components/childs.vue'
import Grandson from './components/grandson.vue'
export default {
  components: {
    Childs,
    Grandson
  },
  setup () {
    const count = ref(1)
    const obj = ref({ name: '小黄', age: 18 })
    const changelist = (cg) => {
      obj.value.age = cg
    }
    // 传给孙子
    provide('count1', count)
    return { count, obj, changelist }
  }
}
</script>

<style lang="scss" scoped>
</style>
